import {computed, ref} from 'vue'

// ***************
// * 是否为暗色主题 *
// ***************
export const isDark = ref(false)

// **********
// * 主题图标 *
// **********
const lightIcon = 'icon-sunbaitian-taiyang'
const darkIcon = 'icon-yueliangxingxing'
export const themeIcon = computed(() =>  isDark.value ? darkIcon : lightIcon)

// **********
// * 主题类名 *
// **********
const lightClass = 'light'
const darkClass = 'dark'
export const themeClass = computed(() =>  isDark.value ? darkClass : lightClass)

// **********
// * 切换主题 *
// **********
export const toggleTheme = () => {
    const htmlClassList = document.documentElement.classList
    if (isDark.value) {
        isDark.value = !isDark.value
        htmlClassList.remove(darkClass)
        htmlClassList.add(lightClass)
        return
    }
    isDark.value = !isDark.value
    htmlClassList.remove(lightClass)
    htmlClassList.add(darkClass)
}